<template>


<div style="padding-top:30px">
	<div>
		<el-button @click="show3 = ! show3,active=0">{{show3 === true?'收起':'申请优惠券'}}</el-button>

		<div style="margin-top: 20px;margin-bottom: 20px">
			<el-collapse-transition>
				<div v-show="show3">
					<el-card class="box-card">
						<el-steps :active="active" finish-status="success">
							<el-step title="申请优惠券"></el-step>
							<el-step title="等待审核"></el-step>
							<el-step title="审核结果"></el-step>
						</el-steps>
						<div v-if="active === 0">
						<el-form v-loading="loading" ref="form" label-position="left"  :ref="form"  :model="form" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;">
							<!--<el-form-item label="活动名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>-->
							<el-form-item label="类型">
								<el-select v-model="form.couponCategory" placeholder="请选择优惠券类型">
									<el-option label="店铺优惠券" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="领取时间">
								<el-col :span="11">
									<el-date-picker
											v-model="form.startTime"
											type="datetime"
											placeholder="选择日期时间"
											:default-time="'00:00:00'"
											value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</el-col>
								<el-col class="line" :span="2">-</el-col>
								<el-col :span="11">
									<el-date-picker
											v-model="form.endTime"
											type="datetime"
											placeholder="选择日期时间"
											:default-time="'00:00:00'"
											value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</el-col>
							</el-form-item>
							<el-form :inline="true"  class="demo-form-inline">
								<el-form-item label="满" >
									<el-input v-model="form.withAmount" placeholder="请输入内容"></el-input>

								</el-form-item>
								<el-form-item label="减">
									<el-input v-model="form.delAmount" placeholder="请输入内容"></el-input>

								</el-form-item>
							</el-form>

							<el-form-item label="持续时间">
								<el-select v-model="form.term" placeholder="请选择持续时间">
									<el-option label="三天" value="3"></el-option>
									<el-option label="七天" value="7"></el-option>
									<el-option label="十天" value="10"></el-option>
									<el-option label="三十天" value="30"></el-option>

								</el-select>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="submit()">立即申请</el-button>
								<el-button @click.native.prevent @click="cancel()">取消</el-button>
							</el-form-item>
						</el-form>
						</div>
					</el-card>


						<div v-if="active == 1">
						<el-card class="box-card">
							<span style="color: #E6A23C;margin: 100px 100px 100px">后台小姐姐正在拼命审核中......</span>

						</el-card>
						</div>

						<div v-if="active == 3">
							<el-card class="box-card">
								<span v-if="status === 1" style="color: #409EFF;margin: 100px 100px 100px">优惠券已生效！</span>
								<span v-if="status === 2" style="color: #909399;margin: 100px 100px 100px">优惠券已失效，请重新申请!</span>
								<span v-if="status === 3" style="color: #909399;margin: 100px 100px 100px">优惠券领取时间已结束！</span>
								<span v-if="status === 5" style="color: #F56C6C;margin: 100px 100px 100px">审核已被打会，稍作调整请再次申请！</span>

							</el-card>
						</div>
				</div>
			</el-collapse-transition>
		</div>
	</div>


	<div>
		<el-card class="box-card">

		<el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				>
			<el-table-column
					prop="couponCategory"
					label="类型"
					:formatter="categoryFormat"
					width="180">
			</el-table-column>
			<el-table-column
					prop="withAmount"
					label="额度"
					width="180">
			</el-table-column>
			<el-table-column
					prop="delAmount"
					label="满减金额">
			</el-table-column>
			<el-table-column
					prop="startTime"
					:formatter="dateFormat"
					label="领取开始时间">
			</el-table-column>
			<el-table-column
					prop="endTime"
					:formatter="dateFormat"
					label="领取结束时间">
			</el-table-column>
			<el-table-column
					prop="status"
					label="状态">
				<template slot-scope="scope">
					<el-tag
							:type="scope.row.status === 1?'success':scope.row.status === 2?'info':scope.row.status === 3?'':scope.row.status === 4?'warning':'danger'"
							effect="dark"
							disable-transitions>{{scope.row.status === 1?'生效':scope.row.status === 2?'失效':scope.row.status === 3?'已结束':scope.row.status === 4?'待审核':'未通过'}}</el-tag>
				</template>
			</el-table-column>

			<el-table-column
					width="190"
					label="进度">
				<template slot-scope="scope">
					<el-button plain
							   size="small"
							   @click="btn(scope.row.status)">查看</el-button>
				</template>

			</el-table-column>
		</el-table>
		</el-card>
	</div>


</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				loading:false,
				seller:{},
				active:0,
				tableData:[],
				show3: false,
				status:1,
				form: {
					title: '',
					couponCategory: '',
					sellerId: '',
					sellerName:'',
					integral: 0,
					withAmount: '',
					delAmount: '',
					startTime: '',
					endTime: '',
					term:''
				}
			}
		},
		mounted(){
			this.getSellerInfo();
			this.getCouponList()
		},
		methods: {
			btn(status){
				this.show3 = true
				console.log(status)
				if(status === 4){
					this.active = 1
					this.status = status
				}else{
					this.active = 3
					this.status = status
				}
			},
			cancel(){
				this.form.title =''
				this.form.sellerName=''
				this.form.sellerId = ''
				this.form.term=''
				this.form.delAmount=''
				this.form.withAmount = ''
				this.form.couponCategory=''
				this.form.startTime=''
				this.form.endTime=''
				this.form.integral=0
			},
			getCouponList(){
				this.loading = true
				this.service.get('/coupon/seller/coupon/getSelfCoupon.do').then(res => {
					console.log(res)
					if(res.data.status === 0){
						this.tableData = res.data.data
						this.loading = false
					}
				})
			},



			onSubmit() {
				console.log('submit!');
			},
			getSellerInfo(){
				var seller = sessionStorage.getItem('seller');
				if (seller) {
					seller = JSON.parse(seller);
					console.log(seller)
					this.form.title = seller.nickName;
					this.form.sellerId = seller.sellerId;
					this.form.sellerName = seller.name;
				}
			},
			submit(){
				var vm  = this

				this.$confirm('确定申请, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.service.post('/coupon/seller/coupon/applyCoupon.do',this.form).then(res => {
						console.log(res)
						if(res.data.status == 0){
							this.loading = true

							//延时器
							setTimeout(() => {
								this.loading = false
							}, 1000);
							vm.$message({
								type: 'success',
								message: '提交申请成功！'
							});
							setTimeout(() => {

								this.$router.go(0);
							}, 1000);



						}else{
							vm.$message({
								type: 'info',
								message: res.data.msg
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消！'
					});
				});

			},
			categoryFormat(row, column){
				if(row[column.property] === '1'){
					return '满减卷'
				}
				if(row[column.property] === '2'){
					return '购物津贴'
				}
			},

			dateFormat(row, column){

				var date = row[column.property] * 1000;
				return moment(date).format("YYYY-MM-DD")
			},
			statusFormat(row,column){
				if(row[column.property] === 1){
					return '已生效'
				}
				if(row[column.property] === 2){
					return '失效'
				}
				if(row[column.property] === 3){
					return '已结束'
				}
				if(row[column.property] === 4){
					return '待审核'
				}
				if(row[column.property] === 5){
					return '未通过'
				}
			}
		}
	}

</script>
<style >
	.el-button--text {
		display:none
	}

	.el-date-picker__time-header{
		display:none
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
		.transition-box {
			margin-bottom: 10px;
			width: 200px;
			height: 100px;
			border-radius: 4px;
			background-color: #409EFF;
			text-align: center;
			color: #fff;
			padding: 40px 20px;
			box-sizing: border-box;
			margin-right: 20px;
	}
</style>